/* eslint-disable no-undef,import/first,prefer-destructuring,jsx-a11y/alt-text */
import React, { Component } from 'react';
import { Table, Form, Input, Button } from 'antd';
import styles from '../../../index.less';
import * as ComFunc from '../../Common/ComFunc';
import * as utils from '../../../utils/utils';
import ShowTypeNew from '../../Common/ShowType/ShowTypeNew';

const FormItem = Form.Item;

class StaticEditTable extends Component {
  /**   构造函数   */
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [], /*   已选择的数据行(数据格式:数组)   */
    };
    this.masterData = {}; /*   主表数据(数据格式:对象)   */
    this.slaveData = []; /*   从表数据(数据格式:数组)   */
    this.dataSource = []; /*   数据(数据格式:数组对象)   */
    this.disabled = false; /*   是否是查看状态(数据格式:布尔)   */
    this.isRender = true; /*   控制表格是否需要渲染(数据格式:布尔)   */
    this.isShowTypeRender = {}; /*   控制每一个showType是否需要渲染(数据格式:对象{sSLaveId1:{sName1:true,sName2:false},sSLaveId2:{sName1:true,sName2:false}})   */
    this.app = {}; /*   全局数据(数据类型:对象)   */
    this.config = {}; /*   配置信息(基础)(数据格式:对象)   */
    this.headerConfig = []; /*   配置信息(数据类型:数组对象)   */
    this.headerColumn = []; /*   表头信息(数据类型:数组对象)   */
    this.tableColumn = []; /*   table的表头信息(数据类型:数组对象)   */
    this.scrollX = 0; /*   表格宽度统计值(数据格式:整形)   */
    this.dateFormat = ''; /*   系统参数日期格式化(数据格式:字符串)   */
    this.showConfigList = []; /*   关于本showType的所有配置(数据格式:数组)   */
    this.formId = ''; /*   窗体Id(数据格式:字符串)   */
    this.sId = ''; /*   主表Id(数据格式:字符串)   */
    this.decimals = {}; /*   数字格式化规范对象(数据格式:对象)   */
    this.isAddShow = false; /*   是否显示添加控件(数据格式:布尔)   */
    this.isDelShow = false; /*   是否显示删除控件(数据格式:布尔)   */
    this.dispatch = () => {}; /*   sql下拉新增tab页的formId(数据格式:字符串)   */
    this.onSlaveChange = () => {}; /*   表单数据改变事件(数据格式:函数)   */
    this.onReturnSlaveSelectValue = () => {}; /*   回带从表下拉数据(数据格式:函数)   */
    this.onAddRow = () => {}; /*   添加行(数据格式:函数)   */
    this.onDelRow = () => {}; /*   删除行(数据格式:函数)   */
    this.onUploadChange = () => {}; /*   上传后执行函数(数据格式:函数)   */
    this.onSelectRowChange = () => {}; /*   复选框选择行发生改变时的变动(数据格式:函数)   */
    this.totalData = props.totalData; /* 总计数据 */
  }

  /**   渲染前只执行一次   */
  componentWillMount() {
    /*   state和this属性赋值   */
    this.assignmentWillProps(this.props);
  }

  componentDidMount() {
    this.handleTotalScroll();
  }

  /**   props改变的时候触发   */
  componentWillReceiveProps(nextProps) {
    /*   state和this属性赋值   */
    this.assignmentWillProps(nextProps);
  }

  /**   返回true执行渲染,返回false不渲染   */
  shouldComponentUpdate() {
    return utils.converStrToBoolean(this.isRender) && utils.isNotEmptyArr(this.headerColumn) && utils.isNotEmptyArr(this.headerConfig);
  }

  componentDidUpdate() {
    this.handleTotalScroll();
  }

  /**   获取复选框对象的props   */
  getRowSelection = () => {
    return {
      selectedRowKeys: this.state.selectedRowKeys, /*   已选择的数据集   */
      onChange: this.handleSelectRowChange, /*   选择行发生改变时调用的函数   */
      type: 'checkbox', /*   现在的选择类型都是复选框   */
    };
  };

  /**   获取table对象的props   */
  getTableProps = () => {
    /*   给数据都添加上key   */
    const dataSource = [...this.addDataSourceKey(this.dataSource)];
    /*   返回值   */
    return {
      size: 'middle',
      bordered: true, /*   显示边框   */
      className: this.disabled ? styles.disabledProup : styles.proup, /*   样式控制   */
      scroll: { x: this.scrollX, y: 'calc(100vh - 465px)' }, /*   宽度   */
      dataSource, /*   数据   */
      columns: this.tableColumn, /*   表头   */
      rowSelection: this.getRowSelection(), /*   添加的复选框(checkbox)功能   */
      pagination: false, /*   不分页   */
    };
  };

  /**   获取table对象的props   */
  getTableTotalProps = () => {
    /*   给数据都添加上key   */
    const dataSource = this.totalData;
    /*   返回值   */
    return {
      size: 'middle',
      bordered: true, /*   显示边框   */
      className: styles.disabledProup, /*   样式控制   */
      scroll: { x: this.scrollX }, /*   宽度   */
      dataSource, /*   数据   */
      columns: this.tableColumn, /*   表头   */
      rowSelection: this.getRowSelection(), /*   添加的复选框(checkbox)功能   */
      pagination: false, /*   不分页   */
    };
  };

  /**   获取showConfigList数据   */
  getShowConfigList = (headerColumn, headerConfig) => {
    /*   返回值   */
    const showConfigList = [];
    /*   取headerColumn.dataIndex与headerConfig.sName相等的dataIndex与headerConfig数据存放到showConfigList中取   */
    for (const headerColumnEach of headerColumn) {
      const headerConfigEach = headerConfig.filter(item => item.sName === headerColumnEach.dataIndex);
      if (utils.isNotEmptyArr(headerConfigEach)) {
        showConfigList.push(headerConfigEach[0]);
      }
    }
    /*   返回值赋值   */
    return showConfigList;
  };

  /**   获取showConfig   */
  getShowConfig = (sName) => {
    /*   返回值声明   */
    let showConfig = [];
    /*   通过sName过滤出对应的showConfig   */
    const showConfigArr = this.showConfigList.filter(item => item.sName === sName);
    if (utils.isNotEmptyArr(showConfigArr)) {
      showConfig = showConfigArr[0];
    }
    /*   返回值   */
    return showConfig;
  };

  /**   获取isRender   */
  getIsRender = (sSlaveId, sName) => {
    /*   返回值声明   */
    let isRender = false;
    if (utils.isNotEmptyObject(this.isShowTypeRender)) {
      const rowRender = this.isShowTypeRender[sSlaveId];
      if (utils.isNotEmptyObject(rowRender)) {
        isRender = utils.converStrToBoolean(rowRender[sName]);
      }
    }
    /*   返回值   */
    return isRender;
  };

  /**   获取table的表头信息(主要是table中的表头信息合并,[{title:1-1},{title:1-2}]变成[{title:1,children:[{title:1},{title:2}]}])   */
  getTableColumn = (headerColumn) => {
    /*   返回值声明   */
    const tableColumn = [];
    /*   遍历每一个表头标题   */
    for (const each of headerColumn) {
      /*   表头标题   */
      const title = each.title;
      /*   带'-'的表头是需要合并滴   */
      const index = title.indexOf('-');
      /*   合并走合并的,不合并就直接push   */
      if (index > -1) { /*   合并   */
        this.mergeTableColumn(title, each, tableColumn, index);
      } else { /*   不合并   */
        tableColumn.push(each);
      }
    }
    /*   返回值   */
    return tableColumn;
  };

  /**   获取ShowType的props   */
  getShowTypeProps = (text, record, sName) => {
    /*   待用数据   */
    const showConfig = this.getShowConfig(sName); /*   配置信息   */
    const isRender = this.getIsRender(record.sId, sName); /*   是否渲染   */

    /*   返回值   */
    return {
      sSlaveId: record.sId, /*   从表编号(数据格式:字符串)   */
      masterData: this.masterData, /*   主表数据(数据格式:对象)   */
      slaveData: this.slaveData, /*   从表数据(数据格式:数组)   */
      dataValue: { value: text }, /*   本showType数据(数据格式:对象)   */
      disabled: this.disabled || showConfig.bReadonly, /*   是否是查看状态(数据格式:布尔)   */
      isRender, /*   是否渲染(数据格式:布尔)   */
      app: this.app, /*   全局数据(数据格式:对象)    */
      showConfig, /*   关于本showType相关配置(数据格式:对象)   */
      formId: this.formId, /*   窗体Id(数据格式:字符串)   */
      sId: this.sId, /*   主表Id(数据格式:字符串)   */
      dispatch: this.dispatch, /*   sql下拉新增tab页的formId(数据格式:字符串)   */
      onSlaveChange: this.onSlaveChange, /*   表单数据改变事件方法(数据格式:函数)   */
      onReturnSlaveSelectValue: this.onReturnSlaveSelectValue, /*   回带从表下拉数据(数据格式:函数)   */
      dataTotal: utils.converStrToBoolean(record.dataTotal), /*   是否需要合计(数据格式:布尔)   */
    };
  };

  /**   获取添加控件的props   */
  getAddProps = () => {
    return {
      disabled: this.disabled, /*   是否可用   */
      style: { display: utils.convertBooleanToDisplayBlock(this.isAddShow) }, /*   是否显示   */
      onClick: this.handleAddRow, /*   点击事件   */
    };
  };

  /**   获取删除控件的props   */
  getDelProps = () => {
    return {
      disabled: this.disabled, /*   是否可用   */
      style: { display: utils.convertBooleanToDisplayBlock(this.isDelShow) }, /*   是否显示   */
      className: styles.del, /*   样式名   */
      onClick: this.handleDelRow, /*   点击事件   */
    };
  };

  /** 合计滚动 */
  handleTotalScroll = () => {
    const { currentPane, panes } = this.props.app;
    const index = panes.indexOf(currentPane); /* 当前页签 */
    const currentTab = document.getElementById('tabs').getElementsByClassName('ant-tabs-content-no-animated')[0].children[index];
    const childTab = currentTab.getElementsByClassName('ant-tabs-content-animated')[0].children;
    const indexSlave = Object.keys(childTab).findIndex(item => childTab[item].getAttribute('aria-hidden') === 'false'); /* 从表当前页签 */
    const topTable = childTab[indexSlave].getElementsByClassName('ant-table-body')[0];
    const botTable = childTab[indexSlave].getElementsByClassName('ant-table-body')[1];
    if (botTable !== undefined) {
      botTable.onscroll = () => {
        topTable.scrollLeft = botTable.scrollLeft;
      };
    }
  };

  /**   添加行   */
  handleAddRow = () => {
    this.onAddRow();
  };

  /**   删除行   */
  handleDelRow = () => {
    this.onDelRow();
  };

  /**   查找控件名是否存在   */
  findIsExistByControlName = (controlName) => {
    /*   返回值声明   */
    let ret = false;
    /*   查询控件名是否存在   */
    if (utils.isNotEmptyArr(this.headerConfig) && utils.isNotEmptyStr(controlName)) {
      const controlConfig = this.headerConfig.filter(item => item.sControlName === controlName);
      ret = utils.isNotEmptyArr(controlConfig) && utils.converStrToBoolean(controlConfig[0].bVisible);
    }
    /*   返回值   */
    return ret;
  };

  /**   绑定showType控件   */
  bindShowType = (text, record, sName) => {
    /*   如果从表没有数据就返回一个默认的input text,不返回showType了   */
    if (utils.isEmptyObject(record) || (record.dataTotal && record[sName] === '')) { /*   从表无数据   */
      return <Input disabled />;
    } else { /*   从表有数据   */
      return <ShowTypeNew {...this.getShowTypeProps(text, record, sName)} />;
    }
  };

  /**   willProps赋值   */
  assignmentWillProps = (props) => {
    /*   全局信息(数据类型:对象)   */
    if (utils.isEmptyObject(this.app)) {
      this.app = { ...props.app };
    }
    /*   配置信息(基础)(数据类型:数组对象)   */
    if (utils.isEmptyObject(this.config) && utils.isNotEmptyObject(props.config)) {
      this.config = { ...props.config };
    }
    /*   配置信息(数据类型:数组对象)   */
    if (utils.isEmptyArr(this.headerConfig) && utils.isNotEmptyObject(this.config) && utils.isNotEmptyArr(this.config.gdsconfigformslave)) {
      this.headerConfig = [...this.config.gdsconfigformslave];
    }
    /*   表头信息(数据类型:数组对象)   */
    if (utils.isEmptyArr(this.headerColumn)) {
      this.headerColumn = [...props.headerColumn];
      /*   showType附加于表格中   */
      if (utils.isNotEmptyArr(this.headerColumn)) {
        for (const child of this.headerColumn) {
          child.render = (text, record) => this.bindShowType(text, record, child.dataIndex);
        }
      }
    }
    /*   table表头信息(数据类型:数组对象)   */
    if (utils.isEmptyArr(this.tableColumn) && utils.isNotEmptyArr(this.headerColumn)) {
      this.tableColumn = this.getTableColumn(this.headerColumn);
    }
    /*   表格宽度统计值(数据格式:整形)   */
    if (utils.isNotEmptyArr(this.headerColumn)) {
      this.scrollX = this.countScrollX(this.headerColumn);
    }
    /*   系统参数日期格式化(数据格式:字符串)   */
    if (utils.isEmptyStr(this.dateFormat)) {
      this.dateFormat = ComFunc.getDateFormat(props.app.systemData);
    }
    /*   关于本showType的所有配置(数据格式:数组)   */
    if (utils.isNotEmptyArr(this.headerColumn) && utils.isEmptyArr(this.showConfigList)) {
      this.showConfigList = [...this.getShowConfigList(this.headerColumn, this.headerConfig)];
    }
    /*   窗体Id(数据格式:字符串)   */
    if (utils.isEmptyStr(this.formId)) {
      this.formId = props.formId;
    }
    /*   主表Id(数据格式:字符串)   */
    if (utils.isEmptyStr(this.sId)) {
      this.sId = props.sId;
    }
    /*   数字格式化规范对象(数据格式:对象)   */
    if (utils.isEmptyObject(this.decimals)) {
      this.decimals = utils.convertUndefinedToEmptyObject(props.app.decimals);
    }
    /* 合计行数据 */
    this.totalData = [...props.totalData];
    /*   是否显示上传控件(数据格式:布尔)   */
    this.isAddShow = this.findIsExistByControlName('btnAdd');
    /*   是否显示上传控件(数据格式:布尔)   */
    this.isDelShow = this.findIsExistByControlName('btnDel');
    /*   sql下拉新增tab页的formId(数据格式:字符串)   */
    this.dispatch = props.dispatch;
    /*   表单数据改变事件(数据格式:函数)   */
    this.onSlaveChange = props.onSlaveChange;
    /*   回带从表下拉数据(数据格式:函数)   */
    this.onReturnSlaveSelectValue = props.onReturnSlaveSelectValue;
    /*   添加行(数据格式:函数)   */
    this.onAddRow = props.onAddRow;
    /*   删除行(数据格式:函数)   */
    this.onDelRow = props.onDelRow;
    /*   上传后执行函数(数据格式:函数)   */
    this.onUploadChange = props.onUploadChange;
    /*   复选框选择行发生改变时的变动(数据格式:函数)   */
    this.onSelectRowChange = props.onSelectRowChange;
    /*   主表数据(数据格式:对象)   */
    this.masterData = { ...props.masterData };
    /*   从表数据(数据格式:数组)   */
    this.slaveData = [...props.slaveData];
    /*   数据(数据格式:数组对象)   */
    this.dataSource = [...props.data];
    /*   是否是查看状态(数据格式:布尔)   */
    this.disabled = props.disabled;
    /*   控制表格是否需要渲染(数据格式:布尔)   */
    this.isRender = props.isRender;
    /*   控制到tr是否需要渲染(数据格式:对象{sSLaveId1:{sName1:true,sName2:false},sSLaveId2:{sName1:true,sName2:false}})   */
    this.isShowTypeRender = { ...props.isShowTypeRender };
    this.setState({
      selectedRowKeys: props.selectedRowKeys, /*   已选择的数据行(数据格式:数组)   */
    });
  };

  /**   合并表头   */
  mergeTableColumn = (title, column, tableColumn, index) => {
    /*   '-'之前的内容是父表头   */
    const parentTitle = title.substring(0, index);
    /*   '-'之后的内容是子表头   */
    const childTitle = title.substring(index + 1, title.length);
    /*   把原有表头都替换成子表头   */
    column.title = childTitle;
    /*   查看父表头是否已经添加   */
    const parentObj = tableColumn.filter(item => item.title === parentTitle);
    /*   [{title:1-1},{title:1-2}]变成[{title:1,children:[{title:1},{title:2}]}]   */
    if (utils.isEmptyObject(parentObj)) { /*   父表头未添加   */
      tableColumn.push({
        title: parentTitle,
        children: [column],
      });
    } else { /*   父表头已添加   */
      parentObj[0].children.push(column);
    }
  };

  /**   处理选择行发生改变   */
  handleSelectRowChange = (selectedRowKeys) => {
    this.onSelectRowChange(selectedRowKeys);
  };

  /**   给每一行从表数据添加key,key值和sId相同   */
  addDataSourceKey = (dataSource) => {
    /*   直接遍历添加key   */
    if (utils.isNotEmptyArr(dataSource)) {
      for (const each of dataSource) {
        each.key = each.sId;
      }
    }
    /*   返回值   */
    return dataSource;
  };

  /**   计算表格总宽度   */
  countScrollX = (headerColumn) => {
    /*   初始值为37(那个checkbox的宽度)   */
    let scrollX = 37;
    /*   遍历每一个表头配置   */
    for (const each of headerColumn) {
      /*   没给宽度的默认120宽度   */
      const iWidth = each.width === 0 ? 120 : each.width;
      /*   累加宽度   */
      scrollX += iWidth;
    }
    /*   返回值   */
    return scrollX;
  };

  /**   渲染   */
  render() {
    /*   获取add的props   */
    const addProps = this.getAddProps();

    /*   获取del的props   */
    const delProps = this.getDelProps();

    /*   获取table中的props   */
    const tableProps = this.getTableProps();

    /*   获取合计table中的props   */
    const tableTotalProps = this.getTableTotalProps();

    /*   页面输出   */
    return (
      <FormItem className={styles.subForm}>
        <div>
          <div className={styles.tableOption}>
            <Button {...addProps}>增行</Button>
            <Button {...delProps} >删行</Button>
          </div>
          <div id="staticEditTable">
            <div className="topTable">
              <Table {...tableProps} />
            </div>
            {
              this.totalData.length > 0
              ?
                <div className="botTable">
                  <Table {...tableTotalProps} />
                </div>
              : null
            }
          </div>
        </div>
      </FormItem>
    );
  }
}

export default StaticEditTable;
